<template>
  <div class="container">
    <div>
      <ZanTab v-bind="tab1" :componentId="'tab1'" @change="handleZanTabChange" />
    </div>
    <div>{{test}}</div>
  </div>
</template>
<script>
import ZanTab from '../../components/zan/tab'
export default {
  components: {
    ZanTab
  },
  data() {
    return {
      test:'11',
      tab1: {
        list: [
          {
            id: 'all',
            title: '全部',
            fixed:'dshavdoiajvfo'
          },
          {
            id: 'topay',
            title: '待预约'
          },
          {
            id: 'tosend',
            title: '待上门'
          },
          {
            id: 'send',
            title: '待确认'
          },
          {
            id: 'sign',
            title: '再次预约'
          }
        ],
        scroll: false,
        selectedId: 'all'
      }
    }
  },
  methods: {
    ...ZanTab.methods,
    handleZanTabChange(e) {
      const { componentId, selectedId } = e
      this[componentId].selectedId = selectedId
      this.test = selectedId
    }
  }
}
</script>
<style  scoped >

</style>